<template>
	<view>
		<my-swiper></my-swiper>
		<uni-goods-nav :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" class="goods-nav"/>
		<!-- 信息栏目 -->
		<view class="info-column">
			<view class="info-price-wrapper">
				<view class="price-box"><text style="font-size: 40rpx;">￥</text>1999</view>
				<view class="volume">
					<uni-icons type="fire-filled" size="13" color="#FF162E" style="margin-right: 5rpx;"></uni-icons>
					近30天8.4万人已兑换
				</view>
			</view>
			<view class="info-price-wrapper">
				<view class="label">
					<label class="label1">
						<uni-icons type="hand-up-filled" size="13" color="#fff" style="margin-right: 5rpx;"></uni-icons>
						超值兑
					</label>
					<label class="label2">商品</label>
				</view>
				<view class="info-price-right">
					<view style="margin-right: 10rpx;">距失效仅剩</view><my-countdown></my-countdown>
				</view>
			</view>
			<view class="line20"></view>
			<view class="info-title">
				【8K高清】双摄像头超广角折叠航拍无人机 出行智能跟拍
			</view>
			<view class="commodity-box">
				<view class="svg-icon">
					<svg t="1660898998650" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19699" width="22" height="22"><path d="M383.301 709.042l-58.396 101.185s-1.062-12.158-2.623-23.45C320.327 772.632 311.773 752.998 291 741c-19.907-11.498-41.483-10.106-55.269-4.215-10.479 4.478-21.612 9.453-21.612 9.453l64.346-111.495a321.142 321.142 0 0 1-41.778-55.586L100.26 815.551c-8.795 15.239-3.527 34.907 11.706 43.705l147.053-62.84 19.127 158.823c15.233 8.798 34.892 3.529 43.687-11.711l123.76-214.446a317.613 317.613 0 0 1-62.292-20.04zM923.74 815.551L787.313 579.157a321.142 321.142 0 0 1-41.778 55.586l64.346 111.495s-11.133-4.975-21.612-9.453c-13.786-5.891-35.362-7.283-55.269 4.215-20.772 11.998-29.327 31.632-31.283 45.776-1.561 11.292-2.623 23.45-2.623 23.45l-58.396-101.185a317.524 317.524 0 0 1-62.292 20.04l123.76 214.446c8.795 15.239 28.454 20.509 43.687 11.711l19.127-158.823 147.053 62.84c15.234-8.798 20.502-28.465 11.707-43.704z" p-id="19700" fill="#f5b47f"></path><path d="M512 128c38.908 0 76.618 7.606 112.083 22.606 34.287 14.502 65.094 35.277 91.564 61.747s47.245 57.277 61.747 91.564C792.394 339.382 800 377.092 800 416s-7.606 76.618-22.606 112.083c-14.502 34.287-35.277 65.094-61.747 91.564s-57.276 47.245-91.564 61.747C588.618 696.394 550.908 704 512 704s-76.618-7.606-112.083-22.606c-34.287-14.502-65.094-35.277-91.564-61.747s-47.245-57.276-61.747-91.564C231.606 492.618 224 454.908 224 416s7.606-76.618 22.606-112.083c14.502-34.287 35.277-65.094 61.747-91.564s57.277-47.245 91.564-61.747C435.382 135.606 473.092 128 512 128m0-64c-194.404 0-352 157.596-352 352s157.596 352 352 352 352-157.596 352-352S706.404 64 512 64z" p-id="19701" fill="#f5b47f"></path><path d="M512.019 330.9c2.401 6.63 4.949 14.071 7.635 22.425l14.546 45.247 47.521-0.845a550.01 550.01 0 0 1 9.743-0.089c7.322 0 13.857 0.156 19.679 0.423-7.236 6.105-16.144 13.126-27.092 21.096l-37.853 27.556L561 491.133c3.008 9.026 5.525 17.133 7.63 24.397a630.953 630.953 0 0 1-17.611-13.078l-38.998-29.97-38.998 29.97a629.19 629.19 0 0 1-17.613 13.08c2.105-7.265 4.622-15.371 7.63-24.399l14.811-44.446-37.891-27.551c-10.438-7.59-19.034-14.294-26.102-20.152 8.566-0.631 18.652-1.09 30.485-1.253l45.981-0.634 14.068-43.781a650.548 650.548 0 0 1 7.627-22.416m-0.01-106.9c-22.549-0.006-45.064 36.647-68.55 109.737-148.871 2.053-163.754 48.007-41.137 137.162-29.791 89.398-29.254 137.123 5.806 137.123 21.422 0 55.732-17.814 103.893-54.825 48.153 37.005 82.47 54.825 103.893 54.825 35.07 0 35.598-47.717 5.804-137.123 119.411-86.929 108.362-137.261-30.254-137.261-3.549 0-7.165 0.033-10.881 0.099-23.542-73.225-46.074-109.731-68.574-109.737z" p-id="19702" fill="#f5b47f"></path></svg>
				</view>
				<view class="service-box">
					<uni-icons type="checkbox" size="12" style="margin-right: 5rpx;" color="#333"></uni-icons>限时兑换
					<uni-icons type="checkbox" size="12" style="margin-right: 5rpx;" color="#333"></uni-icons>全国包邮
					<uni-icons type="checkbox" size="12" style="margin-right: 5rpx;" color="#333"></uni-icons>7天无理由退换
				</view>
			</view>
		</view>
		<product-info @change="buttonClick"></product-info>
		<view class="service-bar contactService" @click="kefu">
			<view class="commodity">
				<text>专享福利</text>
				咨询客服了解更多
			</view>
			<view class="phone">
				<uni-icons type="headphones" size="28" color="#FF162E" style="margin-right: 5rpx;"></uni-icons>
			</view>
		</view>
		<graphic></graphic>
		<price-info></price-info>
		<product-specification ref="prSpec"></product-specification>	
		<back-top v-if="isBackTop"></back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [
					{
						icon: 'home',
						text: '首页'
					}, {
						icon: 'chatboxes-filled',
						text: '客服',
					}
				],
				buttonGroup: [
					{
					  text: '￥1568',
					  backgroundColor: '#fff',
					  color: '#333',
					  price:'直接购买'
					},
					{
					  text: '超值兑>',
					  backgroundColor: '#ff0000',
					  color: '#fff',
					  price:'12000积分+360元'
					}
				],
				isBackTop:false
			}
		},
		computed:{
			device(){
				return this.$store.state.device
			}
		},
		onPageScroll(e){
			const {scrollTop} = e;
			this.isBackTop = (scrollTop >= this.device.windowHeight)
		},
		methods: {
			onClick (e) {
			  uni.showToast({
			    title: `点击${e.content.text}`,
			    icon: 'none'
			  })
			  if(e.content.text=='首页'){
				  this.$uniGo('switchTab',{
				  	url:"/pages/home/home"
				  })
			  }else{
				  this.kefu();
			  }
			},
			kefu(){
				// this.$uniGo('navigateTo',{
				// 	url:"/pages/kefu/kefu"
				// })
			},
			buttonClick (e) {
			  console.log(e)
			  this.$refs.prSpec.open()
			}			
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 55px;
		font-size: $uni-font-size-sm;
	}
	.goods-nav{
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
	}
	.info-column{
		padding: 20rpx 20rpx 0;
		background-color: $uni-text-color-inverse;
		.info-price-wrapper{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.price-box{
				color: $theme-color;
				font-weight: bold;
				font-size: 48rpx;
			}
			.volume{
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
			}
			.label{
				margin: 20rpx 0;
				label{
					padding: 2rpx 10rpx;
					font-size: $uni-font-size-sm;
					display: inline-block;
					border-radius: 5rpx;					
				}
				.label1{
					color: $uni-text-color-inverse;
					background-color: $theme-color;
					margin-right: 15rpx;
				}
				.label2{
					color: $uni-text-color-grey;
					border: 1rpx solid $uni-text-color-grey;
				}
			}
			.info-price-right{
				display: flex;
				align-items: center;
			}
		}
		.line20{
			width: 100vw;
			background-color: $uni-bg-color;
			height: 10px;
			margin-left: -20rpx;
		}
		.info-title{
			margin-top: 20rpx;
			font-weight: bold;
			font-size: $uni-font-size-lg;
		}
		.commodity-box{
			padding: 15rpx 0;
			display: flex;
			margin-top: 20rpx;
			align-items: center;
			.svg-icon{
				display: flex;
				align-items: center;
			}
			.service-box{
				position: relative;
				margin-left: 40rpx;
				&::before{
					content: "";
					width: 1px;
					height: 15px;
					background-color:$uni-text-color-disable ;
					position: absolute;
					left: -15rpx;
				}
			}
		}
	}
	
	.service-bar{
		width: 100%;
		height: 53px;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: $uni-text-color-inverse;
		padding-left: 20rpx;
		font-size: $uni-font-size-sm;
		.commodity{
			text{
				color: $uni-text-color-grey;
				margin-right: 30rpx;
			}
		}
		.phone{
			position: relative;
			padding:0 30rpx;
			display: flex;
			align-items: center;
			&:before{
				content: "";
				width: 1rpx;
				height: 20rpx;
				position: absolute;
				left: 0;
				background-color: #ccc;
			}
		}
	}
	
	
</style>
